// 全屏弹窗组件

import React, { useEffect } from 'react';
import './Modal.css';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
  countdown?: number; // 倒计时秒数，可选
}

/**
 * 全屏弹窗组件
 * 用于显示联系、免责声明、介绍等信息
 */
const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, countdown }) => {
  // 处理ESC键关闭弹窗
  useEffect(() => {
    const handleEscKey = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscKey);
      // 防止背景滚动
      document.body.style.overflow = 'hidden';
    }

    return () => {
      document.removeEventListener('keydown', handleEscKey);
      document.body.style.overflow = 'unset';
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-container" onClick={(e) => e.stopPropagation()}>
        {/* 弹窗头部 */}
        <div className="modal-header">
          <h2 className="modal-title">{title}</h2>
        </div>
        
        {/* 弹窗内容 */}
        <div className="modal-content">
          {children}
        </div>
        
        {/* 弹窗底部 */}
        <div className="modal-footer">
          {countdown !== undefined && countdown > 0 && (
            <span className="modal-countdown">页面在未操作{countdown}s后自动关闭</span>
          )}
          <button 
            className="modal-action-button secondary"
            onClick={onClose}
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  );
};

export default Modal;